$('#header').load('header.html')
$('#footer').load('footer.html')
setTimeout(function () {
    $('header .nav-menu .nav-a').removeClass('active')
    // $('header .nav-menu .nav-a:nth-of-type(2)').addClass('active')
}, 2000)
let arr = JSON.parse(localStorage.getItem('zzh_shop'))
let oDetailTxt = document.querySelector('.detailTxt')
let oTbody = document.querySelector('tbody')

if (arr === null) {
    // oDetailTxt.style.display = 'block'
} else {
    // oDetailTxt.style.display = 'none'

    // 渲染数据
    arr.forEach(function(ele) {
        let str = ` <tr class="table-body" width="1173" data-id="${ele.id}">
                <td width="18">
                    <label for="" class="check-label">
                <input type="checkbox" name="" class="dx" class="check-input">
                <i></i>
            </label>
                </td>
                <td width="172">
                    <div class="pic-group">
                        <a href="" target="_blank"><img src="${ele.img}" alt="" class="pic-img"></a>
                    </div>
                </td>
                <td width="193">
                    <div class="des-group">
                        <div class="desc-name">
                            <span>${ele.name}</span>
                        </div>
                        <div class="desc-size">
                            <span>尺寸：6寸</span>
                        </div>
                        <div class="desc-gift">
                            <span>含餐具5套</span>
                        </div>
                    </div>
                </td>
                <!-- 编辑选择部分 -->
                <td width="210">
                    <div class="select-group">
                        <div class="select-mock father">
                            <div class="select-box mask"></div>
                            <input type="hidden" name="" value="">
                            <img src="https://www.boncake.com.cn/themes/boncake/images/img/pull-down.png" alt="" class="select-img">
                            <ul class="option-mock">
                                <li class="option-item">
                                    <span class="option-txt">编辑或选择</span>
                                </li>
                                <li class="option-item">
                                    <span class="option-txt">生日快乐</span>
                                </li>
                                <li class="option-item">
                                    <span class="option-txt">happy birthday</span>
                                </li>
                                <li id="option-input" class="option-item last">
                                    <input type="text" placeholder="最多可写8个字" class="input-txt" maxlength="8">
                                    <input type="button" value="确定" class="option-btn six">
                                </li>
                            </ul>
                        </div>
                    </div>
                </td>
                <td width="152">
                    <div class="price-group">
                        <span class="price-txt">${ele.price}</span>
                    </div>
                </td>
                <td width="135">
                    <div class="number-group">
                        <img src="https://www.boncake.com.cn/themes/boncake/images/img/input-icon.png" alt="" class="number-imgleft jian">
                        <input type="text" class="number-input" value="${ele.count}">
                        <img src="https://www.boncake.com.cn/themes/boncake/images/img/input-icon.png" alt="" class="number-imgright jia">
                    </div>
                </td>
                <td width="125">
                    <div class="total-group">￥
                        <span class="total-txt">248</span>
                    </div>
                </td>
                <td width="168">
                    <div class="del-group">
                        <img src="https://www.boncake.com.cn/themes/boncake/images/img/close-icon.png" alt="" class="del-btn" id="xs">
                    </div>
                </td>
            </tr>`
        oTbody.innerHTML += str
    })
}


//全选按钮
$('#all').click(function() {

    // 当前复选框的属性
    var status = $(this).prop('checked')

    // console.log(this)

    // 选中的属性

    $('.dx').prop('checked', status)

    // 调用总价

    zj()
})

// 判断当前的全选按钮是否选中

function check_all() {

    // 获取class为dx的所有复选框个数

    var dx = $('.dx').length

    // 获取选中的复选框的个数

    var dx1 = $('.dx:checked').length

    if (dx == dx1) {
        $('#all').prop('checked', true)
    } else {
        $('#all').prop('checked', false)
    }

}

// 给按钮绑定点击事件，调用全选按钮的判断条件

$('.dx').click(function() {
    check_all()

    // 总价
    zj()
})

// 选中删除

$('#xs').click(function() {
    // 遍历复选框是否选中
    $('.dx').each(function(index, ele) {
        // 如果复选框属性等于true
        if ($(ele).prop('checked') == true) {
            // 当前元素的父元素的父元素删除
            $(this).parent().parent().parent().remove()

            // console.log(this)
        }
    })

    // 总价
    zj()
})

// 减(左减右加)

$('.jian').click(function() {

    // 获取当前元素的下一个兄弟元素的val值
    var num = parseInt($(this).next().val())

    num--

    if (num <= 1) {
        num = 1
    }

    // 当前元素的下一个兄弟元素val值是num
    $(this).next().val(num)

    // 总价
    zj()
})

// 加(左减右加)

$('.jia').click(function() {

    // 获取当前元素的上一个兄弟元素的val值
    var num = parseInt($(this).prev().val())
    num++

    // 当前元素的上一个兄弟元素的val值为num
    $(this).prev().val(num)

    // 总价
    zj()
})

// 删除
$('tr>td>.del-group>.del-btn').click(function() {
    // 当前父元素的父元素的父元素删除
    $(this).parent.parent.parent.remove()

    // 总价
    zj()
})

// 总价

function zj() {
    // 商品总价
    var zj = 0.00

    //选中商品数量
    var sl = 0
    $('.dx:checked').each(function() {

        // 单价
        // var dj = 238
        var dj = $(this).parent().parent().nextAll().eq(3).text()

        // 商品数量
        var num = $(this).parent().parent().nextAll().eq(4).children().children().eq(1).val()

        // 总价
        zj += num * dj

        // 数量
        sl += parseInt(num)

    })

    // 选中商品的总数量

    parseInt($('.number-group>input').val())

    // 总计商品的总价格

    $('.total-group>span').text(zj.toFixed(2))


    //遍历选中商品
    $('.dx').each(function() {
        // 单价
        var dj = $(this).parent().parent().nextAll().eq(3).text()

        // 商品数量
        var num = $(this).parent().parent().nextAll().eq(4).children('.number-input').val()

        // 总价
        var total = num * dj

        // 数量
        $(this).parent().nextAll().eq(5).text(total.toFixed(2))


    })

}

zj()

// 选择编辑部分
let flag = true
$('.mask,.father>img').click(function() {
    if (flag) {
        $('.father>ul').css({
            display: 'block'
        })
    } else {
        $('.father>ul').css({
            display: 'none'
        })
    }
    flag = !flag
})
$('.mask').empty()
$('.father>ul').on('click', 'li:lt(3)', function(ev) {
    $('.mask').text($(this).text())
}).on('click', '.six', function(ev) {
    $('.mask').text($(this).siblings().val())
})

// 购物车底部左半部分选项卡

$('.fl').find('.fl-title span').click(function() {
    $(this).addClass('fl-on').siblings().removeClass()
    $(this).parent().siblings('ul').eq($(this).index()).addClass('fl-active').siblings().removeClass('fl-active')
})